<template>
  <div class="earnings">
    <div class="filter">
      <div class="form-item">
        <div class="label">选择分类:</div>
        <n-select
          class="select"
          v-model:value="tableInfo.queryForm.oneCategoryId"
          clearable
          :options="options"
        />
      </div>
      <div class="form-item">
        <div class="label">选择时段:</div>
        <n-date-picker
          class="date-pick"
          v-model:value="queryForm.range"
          type="daterange"
          clearable
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @updateValue="rangeChange"
        />
      </div>
      <div class="form-item">
        <n-button type="primary" class="search-btn" @click="queryData">
          查询
        </n-button>
      </div>
    </div>
    <div class="table">
      <n-data-table
        :columns="columns"
        :data="tableInfo.tableData"
        :pagination="false"
        :bordered="false"
      />
    </div>
    <div class="pagination">
      <n-pagination
        v-model:page="tableInfo.queryForm.pageNo"
        :page-count="tableInfo.total"
        :page-sizes="tableInfo.pageSizes"
        show-quick-jumper
        show-size-picker
        @updatePage="pageChange"
        @updatePageSize="sizeChange"
      ></n-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  NDatePicker,
  NSelect,
  NButton,
  NPagination,
  NDataTable,
  NImage,
  useMessage
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { ref, h, computed, inject } from 'vue'
import { useApi } from '@/hooks/useApi'
import { useRouter } from 'vue-router'
const $clone = inject('$clone') as <T>(data: T) => T
const $getCover = inject('$getCover') as (url: string) => string
const classify = ref([
  {
    id: 1,
    categoryName: '分类1'
  },
  {
    id: 2,
    categoryName: '分类2'
  }
])
const options = computed(() => {
  const list = $clone(classify.value)
  return [
    {
      label: '全部',
      value: ''
    },
    ...list.map((el: any) => {
      return {
        label: el.categoryName,
        value: el.id,
        templateType: el.templateType
      }
    })
  ]
})
const queryForm = ref({
  type: '全部',
  range: null
})
const rangeChange = (e: any, formatValue: any) => {
  if (formatValue) {
    tableInfo.queryForm.startTime = formatValue[0]
    tableInfo.queryForm.endTime = formatValue[1]
  } else {
    tableInfo.queryForm.startTime = ''
    tableInfo.queryForm.endTime = ''
  }
  queryData()
}
const { tableInfo, pageChange, sizeChange, queryData } = useApi({
  isPaging: true,
  isRequest: true,
  getData: async () => {
    return {
      code: 0,
      data: {
        total: 0,
        data: []
      }
    }
  },
  initForm: {
    type: 'EARNINGS',
    startTime: '',
    endTime: '',
    oneCategoryId: ''
  }
})
const toast = useMessage()
const router: any = useRouter()
const handDetail = (e: any) => {
  if (!e.templateType) {
    toast.error('此资源已下架')
    return
  }
  const href = router.resolve({
    path: e.templateType === 'ONE' ? '/conventionDetail' : '/caseDetail',
    query: {
      id: e.resourceId
    }
  })
  window.open(href.href, '_blank')
}

const columns: DataTableColumns<any> = [
  {
    title: '封面',
    key: 'cover',
    align: 'center',
    render(row: any) {
      return h(NImage, {
        src: $getCover(row.cover),
        width: '114',
        height: '70',
        objectFit: 'cover',
        style: {
          borderRadius: '4px'
        }
      })
    }
  },
  {
    title: '标题',
    key: 'title',
    render(row: any) {
      return h(
        'div',
        {
          class: 'cursor-pointer',
          onClick: () => handDetail(row)
        },
        [
          h(
            'div',
            {
              class: 'row-title'
            },
            row.resourceTitle
          ),
          h(
            'div',
            {
              class: 'row-id'
            },
            'ID: ' + row.resourceId
          )
        ]
      )
    }
  },
  {
    title: '收益',
    key: 'money'
  },
  {
    title: '下载时间',
    key: 'createTime'
  }
]
</script>

<style scoped lang="scss">
.earnings {
  .filter {
    display: flex;
    flex-wrap: wrap;
    .form-item {
      margin-right: 16px;
      display: flex;
      align-items: center;
      .label {
        margin-right: 10px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .select {
        width: 130px;
      }
      .date-pick {
        width: 270px;
      }
      .search-btn {
        margin-left: 10px;
      }
    }
  }
  .table {
    margin-top: 21px;
  }
  .pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss">
.earnings {
  //数据表格
  .row-title {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .row-id {
    margin-top: 10px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  //分页
  .n-pagination .n-pagination-item.n-pagination-item--clickable {
    background: #f5f5f5;
    width: 40px !important;
    min-width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .n-pagination
    .n-pagination-item:not(
      .n-pagination-item--disabled
    ).n-pagination-item--active {
    color: #fff;
    background: var(--yang-theme-color);
  }
  .n-pagination .n-pagination-item {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    font-size: 14px;
    border: none;
  }
}
</style>
